<template>
  <div class="mymain">
    
    <router-view></router-view>
    
    <van-tabbar v-model="active">
        <van-tabbar-item v-for="(item) in datas" :key="item.path" :icon="item.icon" :to="item.path" >{{item.name}}</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
    name: 'MyMain',
    data() {
        return {
            active: 0,
            datas:[
                {path:'/main/mianjing/tuiJian' ,name:'面经',icon:'fire-o'},
                {path:'/main/shoucang' ,name:'收藏',icon:'star-o'},
                {path:'/main/dianzan' ,name:'点赞',icon:'like-o'},
                {path:'/main/user' ,name:'我的',icon:'user-o'},
            ]
        }
    },
    watch: {
        $route() {
            // console.log('update router')
            this.active = this.datas.findIndex(item => item.path === this.$route.path)
            if(this.$route.path ==='/main/mianjing/ZuiXin'){
                this.active = 0
            }
            // console.log(this.active)
        }
    },
}
</script>

<style scoped>
    .mymain {
        height: 100%;
    }
    .van-tabbar-item--active {
        color:orange
    }
</style>